<template>
  <div>
    <h2>分类列表</h2>
    <div class="typeList">
       <!-- 
        默认插槽
        1. 子组件内定义 <slot>标签 
        2. 使用组件时 标签内部的内容就是插槽的内容
        3. 插槽可以使用多次
       -->
      <Item title="音乐">
        <ul>
          <li>你听得到</li>
          <li>最长的电影</li>
        </ul>
      </Item>
       <Item title="小花">
        <img src="./assets/1.webp" style="width: 100%" alt="">

      </Item>
       <Item title="西装">
        <img src="./assets/2.png" style="width: 100%" alt="">
      </Item>
    </div>
  </div>
</template>

<script>
import Item from './components/Item.vue'
export default {
  components:{
    Item
  }
}
</script>

<style scoped>
.typeList {
  display: flex;
  justify-content: space-around;
}
</style>